{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ title }}{% endblock %}</title>
    <!-- AdminLTE CSS -->
    <link rel="stylesheet" href="{% static 'css/adminlte.min.css' %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'css/all.min.css' %}">
    <!-- Chart.js -->
    <script src="{% static 'js/chart.min.js' %}"></script>
    {% block extra_css %}{% endblock %}
</head>
<body class="hold-transition sidebar-mini layout-fixed {% if ADMINLTE3_THEME != 'default' %}{{ ADMINLTE3_THEME }}{% endif %}">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="{% url 'dashboard' %}" class="nav-link">首页</a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- 后台管理系统链接 - 仅管理员可见 -->
            {% if user.is_superuser %}
            <li class="nav-item d-none d-sm-inline-block">
                <a href="/admin/" class="nav-link">
                    <i class="fas fa-tools mr-1"></i> 后台管理
                </a>
            </li>
            {% endif %}
            <!-- 主题切换下拉菜单 -->
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="#" role="button">
                    <i class="fas fa-palette text-{% if ADMINLTE3_THEME == 'blue' %}blue{% elif ADMINLTE3_THEME == 'green' %}green{% elif ADMINLTE3_THEME == 'purple' %}purple{% elif ADMINLTE3_THEME == 'red' %}danger{% elif ADMINLTE3_THEME == 'yellow' %}warning{% elif ADMINLTE3_THEME == 'black' %}dark{% else %}primary{% endif %}"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <span class="dropdown-header">选择主题</span>
                    <div class="dropdown-divider"></div>
                    <a href="{% url 'change_theme' %}?theme=default" class="dropdown-item">
                        <i class="fas fa-circle mr-2 text-primary"></i> 默认主题
                    </a>
                    <a href="{% url 'change_theme' %}?theme=blue" class="dropdown-item">
                        <i class="fas fa-circle mr-2 text-blue"></i> 蓝色
                    </a>
                    <a href="{% url 'change_theme' %}?theme=green" class="dropdown-item">
                        <i class="fas fa-circle mr-2 text-green"></i> 绿色
                    </a>
                    <a href="{% url 'change_theme' %}?theme=purple" class="dropdown-item">
                        <i class="fas fa-circle mr-2 text-purple"></i> 紫色
                    </a>
                    <a href="{% url 'change_theme' %}?theme=red" class="dropdown-item">
                        <i class="fas fa-circle mr-2 text-danger"></i> 红色
                    </a>
                    <a href="{% url 'change_theme' %}?theme=yellow" class="dropdown-item">
                        <i class="fas fa-circle mr-2 text-warning"></i> 黄色
                    </a>
                    <a href="{% url 'change_theme' %}?theme=black" class="dropdown-item">
                        <i class="fas fa-circle mr-2 text-dark"></i> 黑色
                    </a>
                </div>
            </li>
            <!-- 用户退出按钮 -->
            <li class="nav-item">
                <a class="nav-link" href="{% url 'logout' %}" role="button" onclick="return confirm('确定要退出登录吗？');">
                    <i class="fas fa-sign-out-alt"></i>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar {% if ADMINLTE3_THEME != 'default' %}sidebar-dark-{{ ADMINLTE3_THEME }}{% else %}sidebar-dark-primary{% endif %} elevation-4">
        <!-- Brand Logo -->
        <a href="{% url 'dashboard' %}" class="brand-link" style="display: flex; align-items: flex-start; padding: 0.5rem 1rem;">
            <!-- <i class="fas fa-chart-line mt-1 mr-3" style="flex-shrink: 0;"></i> -->
            <span class="brand-text font-weight-light" style="text-align: left;">
              <div>{{ PROJECT_TITLE }}</div>
              <div>数据可视化系统</div>
            </span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <!-- <div class="image">
                    <img src="https://via.placeholder.com/150" class="img-circle elevation-2" alt="User Image">
                </div> -->
                <div class="info">
                    <a href="#" class="d-block">{{ user.username|default:'未登录' }}</a>
                    <span class="text-sm text-gray">
                        {% if user.is_authenticated %}
                            {% if user.is_superuser %}管理员{% else %}普通用户{% endif %}
                        {% else %}
                            未登录
                        {% endif %}
                    </span>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                    <li class="nav-item">
                        <a href="{% url 'dashboard' %}" class="nav-link {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>仪表盘</p>
                        </a>
                    </li>
                    <li class="nav-item has-treeview {% if request.resolver_match.url_name == 'data_charts_1' or request.resolver_match.url_name == 'data_charts_2' or request.resolver_match.url_name == 'data_charts_3' %}menu-open{% endif %}">
                        <a href="#" class="nav-link {% if request.resolver_match.url_name == 'data_charts_1' or request.resolver_match.url_name == 'data_charts_2' or request.resolver_match.url_name == 'data_charts_3' %}active{% endif %}">
                            <i class="nav-icon fas fa-chart-bar"></i>
                            <p>
                                数据可视化
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="{% url 'data_charts_1' %}" class="nav-link {% if request.resolver_match.url_name == 'data_charts_1' %}active{% endif %}">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>{{ CHART_TITLE_1 }}</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{% url 'data_charts_2' %}" class="nav-link {% if request.resolver_match.url_name == 'data_charts_2' %}active{% endif %}">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>{{ CHART_TITLE_2 }}</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{% url 'data_charts_3' %}" class="nav-link {% if request.resolver_match.url_name == 'data_charts_3' %}active{% endif %}">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>{{ CHART_TITLE_3 }}</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    {% if user.is_superuser %}
                    <li class="nav-item has-treeview {% if request.resolver_match.url_name == 'user_list' or request.resolver_match.url_name == 'add_user' or request.resolver_match.url_name == 'edit_user' or request.resolver_match.url_name == 'delete_user' %}menu-open{% endif %}">
                        <a href="#" class="nav-link {% if request.resolver_match.url_name == 'user_list' or request.resolver_match.url_name == 'add_user' or request.resolver_match.url_name == 'edit_user' or request.resolver_match.url_name == 'delete_user' %}active{% endif %}">
                            <i class="nav-icon fas fa-users"></i>
                            <p>
                                用户管理
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="{% url 'user_list' %}" class="nav-link {% if request.resolver_match.url_name == 'user_list' %}active{% endif %}">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>用户列表</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{% url 'add_user' %}" class="nav-link {% if request.resolver_match.url_name == 'add_user' %}active{% endif %}">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>添加用户</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item has-treeview {% if request.resolver_match.url_name == 'basic_setting' %}menu-open{% endif %}">
                        <a href="#" class="nav-link {% if request.resolver_match.url_name == 'basic_setting' %}active{% endif %}">
                            <i class="nav-icon fas fa-cog"></i>
                            <p>
                                系统设置
                                <i class="fas fa-angle-left right"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                            <a href="{% url 'basic_setting' %}" class="nav-link {% if request.resolver_match.url_name == 'basic_setting' %}active{% endif %}">
                                <i class="far fa-circle nav-icon"></i>
                                <p>基本设置</p>
                            </a>
                        </li>
                        </ul>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">{% block page_title %}仪表盘{% endblock %}</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">首页</a></li>
                            <li class="breadcrumb-item active">{% block breadcrumb_active %}仪表盘{% endblock %}</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                {% block content %}
                <!-- 内容将由子模板填充 -->
                {% endblock %}
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <strong>© 2025 重庆工程学院 大数据与人工智能学院 </strong>
        <div class="float-right d-none d-sm-inline-block">
            <b>版本</b> 1.0.0
        </div>
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<!-- Bootstrap 4 -->
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'js/adminlte.min.js' %}"></script>

{% block extra_js %}
<script>
    // 页面加载完成后执行
    $(function() {
        // 初始化 - 确保所有子菜单默认是隐藏的
        $('.nav-item.has-treeview > .nav-treeview').hide();
        
        // 为有子菜单的父链接添加点击事件 - 单击展开
        $('.nav-item.has-treeview > a').on('click', function(e) {
            // 只有点击的是父菜单而不是真正的链接时才阻止默认行为
            if ($(this).attr('href') === '#') {
                e.preventDefault();
                e.stopPropagation();
                
                var $parentItem = $(this).parent('.nav-item.has-treeview');
                var $treeview = $parentItem.find('> .nav-treeview');
                
                // 切换子菜单的显示状态
                if ($treeview.is(':visible')) {
                    $treeview.slideUp(300);
                    $parentItem.removeClass('menu-open');
                    $(this).find('.right').removeClass('fa-angle-down').addClass('fa-angle-left');
                } else {
                    $treeview.slideDown(300);
                    $parentItem.addClass('menu-open');
                    $(this).find('.right').removeClass('fa-angle-left').addClass('fa-angle-down');
                }
            }
        });
        
        // 侧边栏折叠功能
        // 使用setTimeout确保AdminLTE完全加载
        setTimeout(function() {
            // 首先尝试使用AdminLTE的原生pushMenu方法
            if ($.AdminLTE && $.AdminLTE.pushMenu) {
                // 重新激活pushMenu
                $.AdminLTE.pushMenu.activate();
                console.log('AdminLTE pushMenu activated');
            } else {
                // 如果AdminLTE对象不存在，使用自定义方法
                console.log('Using custom pushMenu implementation');
                
                // 为所有折叠按钮添加点击事件
                $('.pushmenu, [data-widget="pushmenu"]').on('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $('body').toggleClass('sidebar-collapse');
                });
            }
        }, 100); // 小延迟确保所有资源加载完成
        
        // 如果有活动的子菜单项，确保父菜单是展开的
        $('.nav-treeview .nav-link.active').each(function() {
            var $parentTreeview = $(this).closest('.nav-treeview');
            var $parentItem = $parentTreeview.parent('.nav-item.has-treeview');
            
            $parentTreeview.show();
            $parentItem.addClass('menu-open');
            $parentItem.find('> a .right').removeClass('fa-angle-left').addClass('fa-angle-down');
        });
    });
</script>
{% endblock %}
</body>
</html>